:root {
  --colors: (primary: #1089ff, success: #52c41a, warning: #fa8c16, danger: #f5222d, info: #35495e);

  @each $val, $color in var(--colors) {
    --bin-color-$(val): $(color);
    --bin-color-$(val)-light1: mix(#fff, $(color), 0.2);
    --bin-color-$(val)-light2: mix(#fff, $(color), 0.4);
    --bin-color-$(val)-light3: mix(#fff, $(color), 0.6);
    --bin-color-$(val)-light4: mix(#fff, $(color), 0.8);
    --bin-color-$(val)-light5: mix(#fff, $(color), 0.9);
    --bin-color-$(val)-light6: mix(#fff, $(color), 0.95);
    --bin-color-$(val)-active: mix(#000, $(color), 0.1);
    --bin-color-$(val)-alpha1: rgb(from $(color) r g b / 0.9);
    --bin-color-$(val)-alpha2: rgb(from $(color) r g b / 0.8);
    --bin-color-$(val)-alpha3: rgb(from $(color) r g b / 0.6);
    --bin-color-$(val)-alpha4: rgb(from $(color) r g b / 0.4);
    --bin-color-$(val)-alpha5: rgb(from $(color) r g b / 0.2);
    --bin-color-$(val)-alpha6: rgb(from $(color) r g b / 0.1);
  }

  --bin-color-input-shadow: var(--bin-color-primary-alpha5);
  --bin-color-input-error-shadow: var(--bin-color-danger-alpha5);

  /* 背景色 */
  --bin-bg-color-1: #17171a;
  --bin-bg-color-2: #232324;
  --bin-bg-color-3: #2a2a2b;
  --bin-bg-color-4: #313132;
  /* 文字色 */
  --bin-text-color-1: #1d2129;
  --bin-text-color-2: #4e5969;
  --bin-text-color-3: #86909c;
  --bin-text-color-4: #c9cdd4;
  /* 填充色 */
  --bin-fill-color-1: #fafafa;
  --bin-fill-color-2: #f2f3f5;
  --bin-fill-color-3: #e5e6eb;
  --bin-fill-color-4: #c9cdd4;
  /* bg-color */
  --bin-white-color: #ffffff;
  --bin-black-color: var(--bin-bg-color-1);
  /* white-color */
  --bin-white-color: #fff;
  --bin-white-color-light: rgba(255, 255, 255, 0.65);
  --bin-white-color-light2: rgba(255, 255, 255, 0.35);
  --bin-dark-bg: #000;
  /* text-color */
  --bin-color-text-primary: var(--bin-text-color-1);
  --bin-color-text-default: var(--bin-text-color-2);
  --bin-color-text-secondary: var(--bin-text-color-3);
  --bin-color-text-disabled: var(--bin-text-color-4);
  --bin-color-text-placeholder: var(--bin-text-color-4);
  /* disabled */
  --bin-disabled-border-color: #ebeef5;
  /* bg-color */
  --bin-color-select-hover: #f5f5f5;
  --bin-color-bg-disabled: var(--bin-fill-color-2);
  /* border */
  --bin-border-color-base: #e0e0e6;
  --bin-border-color-light: #f0f0f0;
  --bin-border-color-light-2: rgba(255, 255, 255, 0.24);
  --bin-border-base: 1px solid var(--bin-border-color-base);
  --bin-border-base-light: 1px solid var(--bin-border-color-light);
  --bin-border-popper-color: #ebeef5;
  /* radius */
  --bin-border-radius-none: 0;
  --bin-border-radius-default: 2px;
  --bin-border-radius-medium: 4px;
  /* font-size */
  --bin-font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei,
    SimSun, sans-serif;
  --bin-base-font-weight: 400;
  --bin-font-size-small: 12px;
  --bin-font-size-default: 14px;
  --bin-font-size-large: 16px;
  /* height */
  --bin-large-height: 36px;
  --bin-large-height-2: calc(var(--bin-large-height) - 2px);
  --bin-default-height: 32px;
  --bin-default-height-2: calc(var(--bin-default-height) - 2px);
  --bin-small-height: 28px;
  --bin-small-height-2: calc(var(--bin-small-height) - 2px);
  --bin-mini-height: 24px;
  --bin-mini-height-2: calc(var(--bin-mini-height) - 2px);
  --bin-base-line-height: 1.5715;
  /* animation-duration */
  --bin-animation-duration-slow: 0.35s;
  --bin-animation-duration-base: 0.25s;
  /* shadow-duration */
  --bin-shadow-down: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0px rgba(0, 0, 0, 0.08),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --bin-shadow-popper: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* scrollbar */
  --bin-scrollbar-width: 5px;
  --bin-scrollbar-radius: 5px;
  --bin-scrollbar-color: rgba(0, 0, 0, 0.2);
  --bin-scrollbar-color-hover: rgba(0, 0, 0, 0.3);
  --bin-scrollbar-track: rgba(0, 0, 0, 0.05);
  /* tag-style */
  --bin-tag-height: 22px;
  --bin-tag-font-size: 12px;
  --bin-tag-padding: 0 7px;
  /* page */
  --bin-page-border-color: transparent;
  --bin-page-bg: var(--bin-white-color);
  --bin-page-hover-bg: var(--bin-fill-color-2);
  --bin-page-active-bg: var(--bin-color-primary-light5);
  /* table */
  --bin-table-header-bg: var(--bin-fill-color-2);
  --bin-table-header-text: var(--bin-text-color-1);
  --bin-table-border-color: var(--bin-fill-color-3);
  --bin-table-border: 1px solid var(--bin-table-border-color);
  --bin-edit-table-border-radius: 8px;
  /* popper */
  --bin-popper-padding: 4px;
  --bin-popper-tooltip-padding: 8px 10px;
  --bin-popper-radius: 4px;
  --bin-popper-item-height: 30px;
  --bin-popper-item-margin: 4px;
  --bin-popper-bg-light: var(--bin-white-color);
  --bin-popper-bg-dark: var(--bin-black-color);
  /* menu */
  --bin-menu-padding: 8px;
  --bin-menu-item-height: 40px;
  --bin-menu-item-height-h: 60px;
  --bin-menu-item-border-radius: 4px;
  --bin-menu-item-margin-bottom: 4px;
  --bin-menu-collapse-width: 48px;
  --bin-menu-text-color: var(--bin-color-text-default);
  --bin-menu-text-hover-color: var(--bin-menu-text-color);
  --bin-menu-text-active-color: var(--bin-color-primary);
  --bin-menu-bg-color: var(--bin-white-color);
  --bin-menu-bg-hover-color: var(--bin-color-primary-light6);
  --bin-menu-bg-active-color: var(--bin-color-primary-light6);
}
